<template>
  <div class="app">
    <div class="collect-container">
      <div class="collectbox" v-for="(item, index) in clublist" :key="index">
        <div class="imgbox">
          <img v-lazy="item.z_info.photo" alt="" />
        </div>
        <div class="collectinfobox">
          <div class="name-score-box">
            <div class="clubname">{{ item.z_info.nickname }}</div>
            <div class="clubscore">评分：{{ item.z_info.score }}</div>
          </div>
          <div class="locationbox">
            <van-text-ellipsis
              :content="'简介：' + item.z_info.introduction"
              class="address"
              expand-text="展开"
              collapse-text="收起"
            />
          </div>
          <div class="status-btn-box">
            <div class="status" v-if="item.z_info.can_reserve">可预约</div>
            <div class="status1" v-if="!item.z_info.can_reserve">不可预约</div>
            <div class="todetail">查看详情</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getfavzhujiao } from "@/http/request.js";
import { useStore } from "@/store/index.js";
export default {
  data() {
    return {
      clublist: [],
    };
  },
  methods: {
    initdata() {
      this.clublist = [];
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      getfavzhujiao({ user_id: userinfo.id }).then((res) => {
        if (res.data != null) {
          for (var i = 0; i < res.data.length; i++) {
            this.clublist.push(res.data[i]);
          }
        }
      });
    },
  },
  created() {
    this.initdata();
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: calc(100vh - 100px);
  background-color: #f2f3f5;
}
.collect-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.collectbox {
  width: 90%;
  box-sizing: border-box;
  margin: 10px auto 10px auto;
  padding: 15px;
  background-color: white;
  border-radius: 15px;
  display: flex;
}
.imgbox {
  height: 75px;
  width: 75px;
  overflow: hidden;
  border-radius: 5px;
}
.imgbox img {
  width: 100%;
  height: auto;
}
.collectinfobox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
  width: 75%;
}
.name-score-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.clubname {
  font-size: 20px;
}
.clubscore {
  font-size: 14px;
  color: #757574;
}
.locationbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.address {
  font-size: 16px;
  width: calc(100vh - 100px);
  color: #757574;
}
.status-btn-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.status {
  font-size: 14px;
  width: 65px;
  height: 20px;
  background-color: #8fdcb2;
  color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status1 {
  font-size: 14px;
  width: 75px;
  height: 20px;
  color: white;
  background-color: #b9babd;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.todetail {
  font-size: 16px;
  color: #4d86ff;
}
</style>